@headerHeight: 50px;
@primary-color: #1890ff;
@active-background-color: rgba(0, 0, 0, 0.2);

.header-menu {
    display: block;
    height: 100%;

    :global {
        .ant-menu-root {
            border: 0;
            height: @headerHeight;
            line-height: @headerHeight - 2;
            color: #fff;
        }

        .ant-menu-item > a {
            color: #fff;
        }

        .font-icon {
            margin-right: 8px;
        }

        .ant-menu-item.ant-menu-item-selected > a,
        .ant-menu-item.ant-menu-item-active > a {
            color: #fff;
        }

        .ant-menu-item.ant-menu-item-selected,
        .ant-menu-item.ant-menu-item-active,
        .ant-menu-submenu-selected,
        .ant-menu-submenu-open {
            background-color: @active-background-color;
            border-bottom: 2px solid rgba(255, 255, 255, 0) !important;

            & .ant-menu-submenu-title {
                color: #fff;
            }
        }
    }
}

// 这里用了个全局样式
:global {
    .ant-menu-submenu-popup .font-icon {
        margin-right: 8px;
    }

    .ant-menu-submenu-popup {
        background: @primary-color;

        .ant-menu {
            background-color: transparent;

            span {
                color: #fff;
            }
        }

        .ant-menu-item.ant-menu-item-selected,
        .ant-menu-item.ant-menu-item-active {
            background-color: @active-background-color !important;
        }

        .ant-menu-submenu-arrow {
            &::before,
            &::after {
                background-image: linear-gradient(to right, #fff, #fff) !important;
            }
        }
    }
}
